<template>
  <div class="target-module">
    <div class="module-title">
      <span>求职意向</span>
      <i class=" jl_font">&#xe623;</i>
    </div>
    <div class="edit-box">
      <div class="clearfix">
        <el-row :gutter="10">
           <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <div class="form_groun">
              <label class="label right">期望职位</label>
              <div class="select-box select_w100">
                <el-select v-model="value.target_position" multiple filterable allow-create placeholder="请输入或选择期望职位" no-data-text="请输入职位名称" :multiple-limit='5'>
                  <el-option v-for="item in position_list" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <div class="form_groun">
              <label class="label right">期望月薪</label>
              <el-input v-model="value.target_salary" placeholder="请输入金钱范围或面议"></el-input>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <div class="form_groun">
              <label class="label right">职业类型</label>
              <div class="checkbox-box">
                <el-checkbox-group v-model="value.target_type">
                  <el-checkbox-button v-for="targetTypeItem in target_type_list" :label="targetTypeItem.value" :key="'targetType'+targetTypeItem">{{targetTypeItem.label}}</el-checkbox-button>
                </el-checkbox-group>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <div class="form_groun">
              <label class="label right">期望地点</label>
              <div class="select-box select_w100">
                <el-select v-model="value.target_location" multiple filterable allow-create placeholder="请输入或选择期望工作地点" :multiple-limit='5'>
                  <el-option v-for="item in hot_city_list" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <div class="form_groun">
              <label class="label right">期望行业</label>
              <div class="select-box select_w100">
                <el-select v-model="value.target_industry" multiple filterable allow-create placeholder="请输入或选择期望进入行业" :multiple-limit='5'>
                  <el-option v-for="item in hot_industry_list" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter='10'>
          <el-col :span="24">
            <el-button type="primary" @click="submitForm">保存</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { saveResumeTarget } from "api";
export default {
  props: {
    value: {
      type: Object,
      default: () => {
        return null;
      }
    }
  },
  data() {
    return {
      type: "target",
      target_type_list: [
        {
          value: "1",
          label: "全职"
        },
        {
          value: "2",
          label: "兼职"
        },
        {
          value: "3",
          label: "实习"
        },
        {
          value: "4",
          label: "外包"
        }
      ],
      position_list: [],
      hot_city_list: [],
      loading: false,
      hot_city: [
        "北京市",
        "上海市",
        "深圳市",
        "广州市",
        "杭州市",
        "武汉市",
        "成都市",
        "郑州市",
        "西安市",
        "长沙市",
        "天津市",
        "合肥市",
        "福州市",
        "苏州市",
        "南京市",
        "重庆市",
        "厦门市",
        "东莞市",
        "佛山市"
      ],
      hot_industry_list: [
        { value: "互联网/移动互联网/电子商务", label: "互联网/移动互联网/电子商务" },
        { value: "网络游戏", label: "网络游戏" },
        { value: "计算机软件", label: "计算机软件" },
        { value: "IT服务/系统集成", label: "IT服务/系统集成" },
        { value: "电子技术/半导体/集成电路", label: "电子技术/半导体/集成电路" },
        { value: "计算机硬件/网络设备", label: "计算机硬件/网络设备" },
        { value: "通信(设备/运营/增值)", label: "通信(设备/运营/增值)" },
        { value: "房地产开发/建筑/建材/工程", label: "房地产开发/建筑/建材/工程" },
        { value: "银行", label: "银行" },
        { value: "保险", label: "保险" },
        { value: "基金/证券/期货/投资", label: "基金/证券/期货/投资" },
        { value: "会计/审计", label: "会计/审计" },
        { value: "食品/饮料/烟酒/日化", label: "食品/饮料/烟酒/日化" },
        { value: "服装服饰/纺织/皮革", label: "服装服饰/纺织/皮革" },
        { value: "办公用品及设备", label: "办公用品及设备" },
        { value: "百货/批发/零售", label: "百货/批发/零售" },
        { value: "机械制造/机电/重工", label: "机械制造/机电/重工" },
        { value: "仪器/仪表/工业自动化/电气", label: "仪器/仪表/工业自动化/电气" },
        { value: "专业服务(咨询/财会/法律/翻译等)", label: "专业服务(咨询/财会/法律/翻译等)" },
        { value: "外包服务", label: "外包服务" },
        { value: "租赁服务", label: "租赁服务" },
        { value: "娱乐/休闲/体育", label: "娱乐/休闲/体育" },
        { value: "旅游/酒店/餐饮服务/生活服务", label: "旅游/酒店/餐饮服务/生活服务" },
        { value: "广告/公关/市场推广/会展", label: "广告/公关/市场推广/会展" },
        { value: "影视/媒体/艺术/文化/出版", label: "影视/媒体/艺术/文化/出版" },
        { value: "教育/培训/学术/科研/院校", label: "教育/培训/学术/科研/院校" },
        { value: "交通/物流/运输", label: "交通/物流/运输" },
        { value: "贸易/进出口", label: "贸易/进出口" },
        { value: "制药/生物工程", label: "制药/生物工程" },
        { value: "医疗/保健/美容/卫生服务", label: "医疗/保健/美容/卫生服务" },
        { value: "医疗设备/器械", label: "医疗设备/器械" },
        { value: "能源(电力/水利)", label: "能源(电力/水利)" },
        { value: "石油/石化/化工", label: "石油/石化/化工" },
        { value: "采掘/冶炼/矿产", label: "采掘/冶炼/矿产" },
        { value: "环保/新能源", label: "环保/新能源" },
        { value: "政府/公共事业/非营利机构", label: "政府/公共事业/非营利机构" },
        { value: "农/林/牧/渔", label: "农/林/牧/渔" }
      ]
    };
  },
  mounted() {
    console.log("进入target");
    this.hot_city_list = this.hot_city.map(item => {
      return { value: item, label: item };
    });
  },
  methods: {
    submitForm() {
      this.$promise.post(saveResumeTarget, this.value).then(resp => {
        if (resp.status == 1) {
          this.$message({
            message: "保存成功",
            type: "success"
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.target-module {
  background: #fff;
  color: #000;
}
</style>

